<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <div class="content">
        <div class="headRow">
          <p class="title">头像</p>
          <img :src="userInfo.headimg">
          <div class="file_img">
            <input id="clickMe" type="file" name="file" @change='add_img' accept="image/gif, image/jpeg, image/png"/>
          </div>
        </div>
        <div class="row" @click="username">
          <p class="title">昵称</p>
          <input class="span" readonly v-model="userInfo.nickname"></input>
          <i></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'PersonalInfo',
    data () {
      return {
        show: false,
        userInfo: {},
        imgDataUrl: '',
        img: ''
      }
    },
    methods: {
      dan_img: function (img, backFunction) {
        let thisObj = this
        let formData = new FormData()
        formData.append('image', img)
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let url = this.$chaos.formatUrl('Index/uploadFileSingle')
        axios.post(url, formData, config
        ).then((res) => {
          if (res.data.status === 'SUCCESS') {
            console.log(res.data.result.image_relative_path)
            thisObj.imgDataUrl = res.data.result.image_relative_path
            backFunction('success')
          } else {
            backFunction('error')
          }
        }, () => {
          backFunction('error')
        })
      },
      add_img: function () {
        let thisObj = this
        let file = event.target.files[0]
        thisObj.img = file
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          let base64Code = this.result
          thisObj.userInfo.headimg = base64Code
          thisObj.dan_img(thisObj.img, function (res) {
            if (res === 'error') {
              thisObj.$vux.toast.show({
                text: '图片上传失败',
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            } else {
              let data = {
                headimg: thisObj.imgDataUrl
              }
              thisObj.$chaos.ajax({
                data: data,
                slient: true,
                userinfo: true,
                url: 'User/saveUserData',
                callback: function (type, res) {
                  if (res.status === 'SUCCESS') {
                    thisObj.$vux.toast.show({
                      text: res.result.msg,
                      type: 'text',
                      width: '180px',
                      position: 'bottom'
                    })
                  } else {
                    thisObj.$vux.toast.show({
                      text: res.result.msg,
                      type: 'text',
                      width: '180px',
                      position: 'bottom'
                    })
                  }
                }
              })
            }
          })
        }
      },
      username: function () {
        window.location.href = '#/InfoEditer?name=' + encodeURI(this.userInfo.nickname)
      },
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle('编辑信息')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '编辑信息')
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            slient: true,
            userinfo: true,
            url: 'User/getUserData',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.userInfo = res.result.user_info
                thisObj.show = true
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .content .headRow {
    position: relative;
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #eee;
  }
  .file_img{
    position: absolute;
    width: 45px;
    height: 45px;
    right: calc(6% + 8px);
    top: 10px;
    border: 2px solid #ddd;
    border-radius: 50%;
    box-sizing: border-box;
    z-index:4444;
  }
  .file_img input{
    width:100%;
    height:100%;
    opacity: 0;
    position: absolute;
    top:0px;
  }
  .content .headRow .title {
    text-indent: 5%;
  }
  .content .headRow>img {
    position: absolute;
    width: 45px;
    height: 45px;
    right: calc(6% + 8px);
    top: 10px;
    border: 2px solid #ddd;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .content .row {
    position: relative;
    width: 100%;
    height: 45px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .content .row .title {
    height: 45px;
    line-height: 45px;
    text-indent: 5%;
  }
  .content .row>.span {
    position: absolute;
    right: calc(6% + 8px);
    height: 25px;
    line-height: 25px;
    top: 10px;
    color: #777;
    text-align: right;
  }
  input, button, textarea {
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    resize: none;
  }
</style>
